<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title=""
    :footer="null"
    :width="1000"
    :height="630"
    :canFullscreen="false"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <template v-if="state.cropPlantData">
      <section class="cropPlantList" v-for="(item, index) in state.cropPlantData" :key="index">
        <h3 class="title"><span>农作物名称：</span><p>{{ item.cropName }}</p></h3>
        <ul v-if="item.plantInfoList[0]">
          <li><span>种植面积：</span><p>{{ item.plantInfoList[0].cropArea }}</p></li>
          <li><span>开始种植时间：</span><p>{{ item.plantInfoList[0].startTime }}</p></li>
          <li><span>截止种植时间：</span><p>{{ item.plantInfoList[0].endTime }}</p></li>
          <li><span>当前农作物生长周期：</span><p>{{ item.plantInfoList[0].status }}</p></li>
          <li><span>生长天数：</span><p>{{ item.plantInfoList[0].growthDay }}</p></li>
        </ul>
        <div class="cropImg">
          <img :src="item.plantInfoList[0].photoList[0]" alt="" />
          <span>当前农作物生长周期图片</span>
        </div>
      </section>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide } from 'vue';
  import { BasicModal, useModalInner } from '@gui-pkg/antdcomponents';
  import { getCropPlantData } from '@/api/demonstrationZone/baseData';

  const modalHeightValue = ref(680);
  const state = reactive({
    cropPlantData: null,
  });

  const [register, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    state.data = data.record;
    const cropPlantData = await getCropPlantData();
    console.log(cropPlantData, 'cropPlantData');
    state.cropPlantData = cropPlantData;
  });

  // 弹窗高度变化，主要是监听是否点击了全屏
  const handleHeightChange = (height: string) => {
    modalHeightValue.value = height;
  };
  provide('ModalHeightChange', modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .cropPlantList {
    position: relative;
    background: #f5f5f5;
    margin-bottom: 20px;
    padding: 20px;
    h3.title {
      font-size: 18px;
      display: flex;
      align-items: center;
      color: #666;
      p {
        font-size: 18px;
        font-weight: bold;
        color: #000;
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      li {
        display: flex;
        align-items: center;
        font-size: 18px;
        height: 44px;
        color: #666;
        p {
          font-size: 18px;
          color: #000;
        }
      }
    }
    .cropImg {
      position: absolute;
      right: 4%;
      top: 20px;
      display: flex;
      flex-direction: column;
      img {
        height: 220px;
        margin-bottom: 6px;
      }
      span {
        color: #999;
      }
    }
  }
</style>
